import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
  Image,
  Animated,
  Easing,
} from 'react-native';

export default class SimpleAnimate1 extends Component {
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      fadeInOpacity: new Animated.Value(0),
    };
    this._onPress = this._onPress.bind(this);
  }

  _onPress() {
    Animated.timing(this.state.fadeInOpacity, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,// 线性的渐变函数
    }).start();
  }

  shouldComponentUpdate(){
    return false;
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View // 可选的基本组件类型: Image,Text,ScrollView,View(可以包裹任意子View)
          style={[styles.content, {opacity: this.state.fadeInOpacity,}]}>
          <Text style={[{textAlign: 'center'}]}>Hello World!</Text>
        </Animated.View>
        <TouchableOpacity style={styles.content} onPress={this._onPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Press me!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop:25,
    flex: 1,
  },
  content: {
    backgroundColor: 'rgba(200, 230, 255, 0.8)',
    marginBottom:10,
    justifyContent:"center",
    alignSelf:"center",
  },
  button: Platform.select({
    ios: {},
    android: {
      elevation: 4,
      // Material design blue from https://material.google.com/style/color.html#color-color-palette
      backgroundColor: '#2196F3',
      borderRadius: 2,
      width:100,
      height:30,
    },
    justifyContent:"center",
    alignSelf:"center",
  }),
  buttonText: {
    alignSelf:"center",
  }
});
